<template>
  <div
    class="description-box"
    :style="{
      textIndent: componentData.indent + 'em',
      fontSize: componentData.fontSize + 'px',
      color: componentData.color,
      cursor:
        dataKey === 'common' &&
        componentData.url.length > 0 &&
        $route.name !== 'dragReport'
          ? 'pointer'
          : 'auto',
      textAlign: componentData.textAlign,
    }"
    @click="onRouteUrl(dataKey)"
  >
    <div class="description-content" v-html="description"></div>
  </div>
</template>

<script>
export default {
  name: 'custom-report-component-text-description',
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    dataKey: {},
    mainTitle: {},
    time: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      comInterval: 0,
      isDataReady: false,
      placeholderList: [],
      description:
        ' description，这是一段测试文字{%%}，这是一段测试文字{%%}，这是一段测试文字{%%}，这是一段测试文字{%%}，这是一段测试文字{%%}，这是一段测试文字{%%}',
    }
  },
  methods: {
    onRouteUrl() {
      if (
        this.dataKey === 'common' &&
        this.componentData.url.length > 0 &&
        this.$route.name !== 'dragReport'
      ) {
        this.$router.push({
          path: this.componentData.url[this.componentData.url.length - 1],
        })
      }
    },
    parsedescription() {
      let option = this.componentData
      let splitList = this.componentData.template.split('{%%}')
      let mapList = splitList.map((item, i) => {
        return `${item}<span style="text-indent:0; font-size:${
          option.keywordFontSize
        }px;color:${option.keywordColor};padding:0 ${option.keywordPadding}px" >
      ${
        i == splitList.length - 1 || this.placeholderList[i] === undefined
          ? ''
          : this.placeholderList[i].data
      }</span>`
      })
      this.description = mapList.join('')
    },
    changeParam() {
      this.getDescription()
      clearInterval(this.comInterval)
      if (this.interval) {
        this.comInterval = setInterval(() => {
          this.getDescription()
        }, this.interval * 1000)
      }
    },
    getDescription() {
      let parseDescriptionData = (data) => {
        this.placeholderList = data
        this.parsedescription()
        if (!this.isDataReady) {
          this.isDataReady = true
          this.$emit( 'dataReady')
        }
      }
      if (!this.api || !this.api.reqUrl) {
        let data = [
          {
            //每个空位内容
            data: 1, //空位具体内容
            name: '空位1', //空位介绍
          },
          {
            data: 2,
            name: '空位2',
          },
          {
            data: 3,
            name: '空位3',
          },
          {
            data: 2,
            name: '空位4',
          },
          {
            data: 4,
            name: '空位5',
          },
          {
            data: 5,
            name: '空位6',
          },
        ]
        parseDescriptionData(data)
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.list
            if (!data || JSON.stringify(data) === '{}') {
              return
            }
            parseDescriptionData(data.valueList)
          },
          onError: () => {},
        })
      }
    },
  },
  watch: {
    'api.dsName': function () {
      this.getDescription()
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        this.changeParam()
      },
      deep: true,
    },
    componentData() {
      this.parsedescription()
    },
  },
  created() {
    this.changeParam()
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  emits: ['dataReady'],
}
</script>

<style scoped>
.description-box {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  flex-wrap: wrap;
  height: calc(100% + 57px);
  padding: 5px 0px;
  display: flex;
  position: relative;
}
.description-content {
  margin: 0 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
